<!-- 在306行预留设置了跳转页面的链接，需要的话可以使用 -->
<template>
	<view>
		<form @submit="formSubmit">
			<view class="container-talk">
				<!-- 标签拦 -->
				<view class="chooseLabel">
					<!-- 那个脸 -->
					<view class="label-icon">
						<image
							src="cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/posetake1.png"
							mode=""></image>
					</view>
					<!-- 选择标签 -->
					<view class="inputLabel">
						<input name="tags" type="text" placeholder="请选择标签" disabled="true" :value="inputTxt"
							@click="toggle('bottom')">
						<!-- 抽屉选择标签 -->
						<uni-popup ref="popup" background-color="#fff" @change="change">
							<ul class="tagList">
								<li v-for="item in talkTap" :key="item" @click="getMeg" :data-text="item.message">
									{{item.message}}
								</li>
							</ul>
						</uni-popup>
					</view>
				</view>
				<!-- 标题 -->
				<view class="title">
					<input type="text" name="title" placeholder="请输入完整帖子的标题" :value="titleContent"
						@input="onKeyInputTitle" maxlength="15">
				</view>
				<!-- 编辑内容 -->
				<view class="content">
					<textarea name="content" id="" cols="30" rows="10" placeholder="来吧,分享什么？" :value="content"
						@input="onKeyInputContent">{{content}}</textarea>
				</view>
				<!-- 添加图片 -->
				<view class="img_box">
					<view class="imgShow" v-for="(item, index) in tempFilePath" :key="item.id">
						<image :src="item" mode="aspectFill" @click="showImg" :data-index="index"
							@longpress="deleteImage"></image>
					</view>
					<view class="imgAddBox">
						<view class="imgAdd" @click="photo()" v-if="tempFilePath.length < 9">
							<text>+</text>
						</view>
					</view>
				</view>
				<!-- 发送 -->
				<button form-type="submit" class="map-icon" @click="toSet">
					<image :src="setImg" mode=""></image>
				</button>
				<!-- 你在哪？ -->
				<view class="where-icon" @click="chooseLocation">
					<input name="address" type="text" placeholder="你在哪里" placeholder-class="wherePlaceholder"
						:value="localName" @change="onKeyInputLocalName" disabled="true">
				</view>
			</view>
		</form>
	</view>
</template>
<script>
	//初始化环境，通过init指定环境
	wx.cloud.init({
		env: 'klausjins-0go3socwd767ad11'
	})
	const db = wx.cloud.database()
	export default {
		name: "plusTalk",
		props: ['userOpenid'],
		data() {
			return {
				//页面类型，是talk，freetake，rent，run中的一个
				plus: 'talk',
				//正文内容
				content: '',
				//标题内容
				titleContent: '',
				//标签选择内容
				inputTxt: '',
				//位置选择地名
				localName: '',
				//图片地址
				tempFilePath: [],
				//发送按钮默认灰色
				setImg: "cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png",
				//标签选项
				talkTap: [{
					message: '学习',
				}, {
					message: '吐槽',
				}, {
					message: '生活',
				}]
			};
		},
		methods: {
			formSubmit(res) {
				console.log(res);
			},
			change(e) {
				this.show = e.show
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			getMeg: function(e) {
				//获取文本框中输入的内容
				var text = e.currentTarget.dataset.text;
				this.inputTxt = text;
				//console.log(this.inputTxt);
				if (this.titleContent != '' && this.content != '' && this.inputTxt != '' && this.tempFilePath
					.length !== 0) {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
				} else {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
				}
				this.close();
			},
			//键盘输入同步title的内容
			onKeyInputTitle: function(e) {
				//输入内容时判断input框中是否有内容，有的话发送图标变为可用
				this.titleContent = e.target.value
				if (this.titleContent != '' && this.content != '' && this.inputTxt != '' && this.tempFilePath
					.length !== 0) {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
				} else {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
				}
			},
			//键盘输入同步textare的值
			onKeyInputContent: function(e) {
				this.content = e.target.value
				if (this.titleContent != '' && this.content != '' && this.inputTxt != '' && this.tempFilePath
					.length !== 0) {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
				} else {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
				}
			},
			onKeyInputLocalName(e) {
				let text = e.detail.value;
				this.localName = text;
				if (this.content != '' && this.titleContent != '' && this
					.inputTxt != '' && this
					.tempFilePath
					.length !== 0 && this.localName != '') {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
				} else {
					this.setImg =
						'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
				}
			},
			photo: function() {
				var that = this;
				uni.chooseImage({
					count: 9 - this.tempFilePath.length,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera', 'album'], //camera 拍照 album 相册
					success: res => {
						//压缩图片后修改本地tempFilePath
						//这里的问题是因为for 和 if 同步进行了，导致if中的tempFilePath没有同步到
						for (var i = 0; i < res.tempFilePaths.length; i++) {
							uni.compressImage({
								src: res.tempFilePaths[i],
								quality: 20,
								success: res => {
									console.log(res.tempFilePath);
									let tempFilePaths = res.tempFilePath
									that.tempFilePath = that.tempFilePath.concat(tempFilePaths)
									if (that.content != '' && that.titleContent != '' && that
										.inputTxt != '' && that
										.tempFilePath
										.length !== 0 && that.localName != '') {
										that.setImg =
											'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
									} else {
										that.setImg =
											'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
									}
								}
							})
						}

					}
				});
			},
			showImg(e) {
				var index = e.currentTarget.dataset.index;
				//点击预览图片
				console.log(index);
				uni.previewImage({
					current: index,
					urls: this.tempFilePath,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data
								.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			chooseLocation: function() {
				var that = this;
				uni.chooseLocation({
					success: function(res) {
						if (res.name != '') {
							that.localName = res.name;
							//console.log(this.content + ' ' + this.titleContent + ' ' + this.inputTxt + ' ' + this.localName +' ' + this.tempFilePath);
						} else {
							that.localName = '你在哪里'
						}
						if (that.content != '' && that.titleContent != '' && that
							.inputTxt != '' && that
							.tempFilePath
							.length !== 0 && that.localName != '') {
							that.setImg =
								'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
						} else {
							that.setImg =
								'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
						}
					}
				});
			},
			toSet: function() {
				var that = this;
				var images = that.tempFilePath;
				console.log(this.content + ' ' + this.titleContent + ' ' + this.inputTxt + ' ' + this.localName + ' ' +
					this
					.tempFilePath);
				//点击发送图标后的事件
				// db.collection('plus_info').get().then(res => {
				// 	// res.data 包含该记录的数据
				// 	console.log(res.data)
				// })
				//先判断，有问题的就不能点，没问题就可以上传
				if (that.titleContent == '' || that.content == '' || that.inputTxt == '' || that
					.tempFilePath
					.length === 0) {
					uni.showToast({
						icon: "error",
						title: "请完善信息",
						duration: 2000
					})
				} else {
					//上传图片到云存储
					wx.showLoading({
						title: '上传中',
					})
					let promiseArr = [];
					for (let i = 0; i < that.tempFilePath.length; i++) {
						promiseArr.push(new Promise((reslove, reject) => {
							let item = that.tempFilePath[i];
							//let suffix = /\.\w+$/.exec(item)[0]; //正则表达式返回文件的扩展名
							wx.cloud.uploadFile({
								//需要重命名
								cloudPath: "plus/user/" + that.userOpenid + " plusRent " + Date
									.now() + i +
									".jpg", // 上传至云端的路径
								filePath: item, // 小程序临时文件路径
								success: res => {
									console.log(res.fileID) //输出上传后图片的返回地址
									reslove();
									wx.hideLoading();
									wx.showToast({
										title: "上传成功",
									})
								},
								fail: res => {
									wx.hideLoading();
									wx.showToast({
										title: "上传失败",
									})
								}

							})
						}));
					}

					//console.log( th.userInfo._openid );   
					//console.log(that.data.tempFilePaths);
					//处理结束后再把images赋给tempFilePathsCloud

					that.tempFilePathsCloud = images;
					//上传成功
					db.collection('plus_info').add({
						data: {
							plus: that.plus,
							title: that.titleContent,
							label: that.inputTxt,
							content: that.content,
							image: that.tempFilePath,
							local: that.localName,

						}
					}).then(res => {
						console.log(res);
						uni.showToast({
							title: "发布成功！",
							duration: 2000
						})
						setTimeout(function() {
							that.titleContent = '',
								that.content = '',
								that.inputTxt = '',
								that.tempFilePath = [],
								that.localName = ''
							// wx.reLaunch({
							//   url: '在此处设置跳转页面,记得在250行结尾加逗号',
							// })
						}, 2000)
					})
				}

			},
			deleteImage: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index; //获取当前长按图片下标
				uni.showModal({
					title: '提示',
					content: '确定要删除此图片吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('点击确定了');
							that.tempFilePath.splice(index, 1);
							if (that.content != '' && that.titleContent != '' && that
								.inputTxt != '' && that
								.tempFilePath
								.length !== 0 && that.localName != '') {
								that.setImg =
									'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly2.png'
							} else {
								that.setImg =
									'cloud://klausjins-0go3socwd767ad11.6b6c-klausjins-0go3socwd767ad11-1310485191/plus/fly1.png'
							}
						} else if (res.cancel) {
							console.log('点击取消了');
							return false;
						}
					}
				})
			}
		}

	}
</script>

<style lang="scss">
	.container-talk {
		background-color: #fff;
		border-radius: 35rpx 35rpx 0 0;
		width: 100%;
		overflow: hidden;
		min-height: 90vh;

		.chooseLabel {
			display: flex;
			width: 750rpx;
			height: 48rpx;
			padding-top: 40rpx;

			.label-icon {
				display: flex;
				margin-left: 16rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.label-more {
				display: flex;

				image {
					width: 48rpx;
					height: 48rpx;
				}


			}

		}

		.inputLabel {
			display: flex;
			width: 750rpx;
			margin-left: 12rpx;
			font-size: 14px;

			.tagList {
				margin-top: 50rpx;
			}

			.tagList li {
				height: 50rpx;
				margin-bottom: 20rpx;
				align-items: center;
				text-align: center;

			}
		}

		.imgAddBox {
			display: flex;
			width: 33%;
			overflow: hidden;
		}

		.imgAddBox .imgAdd {
			display: flex;
			width: 160rpx;
			height: 160rpx;
			border: 6rpx dashed #C7C2C2;
			border-radius: 20rpx;
			align-items: center;
			justify-content: center;
			color: #C7C2C2;
			margin-left: 40rpx;
			font-size: 30px;

		}



		.imgShow {
			display: flex;
			overflow: hidden;
			float: left;
			width: 33%;
			height: 246rpx;
			justify-content: center;


			image {
				display: flex;
				width: 170rpx;
				height: 170rpx;
				border-radius: 20rpx;
			}
		}

		.title {
			display: flex;
			margin-left: 16rpx;
			padding-left: 20rpx;
			margin-top: 24rpx;
			padding-bottom: 24rpx;
			border-bottom: 4rpx solid #bababa;
			margin-right: 16rpx;

			input {
				width: 600rpx;
			}
		}

		.content {
			display: flex;
			width: 700rpx;
			height: 35vh;
			margin-left: 16rpx;
			padding-left: 20rpx;
			margin-top: 24rpx;

			textarea {
				height: 300rpx;
				width: 700rpx;
			}
		}

		.where-icon {
			display: flex;
			width: 176rpx;
			height: 48rpx;
			margin-top: 6vh;
			border-radius: 10px;
			margin-left: 42rpx;
			background-color: #d8d8d8;

			input {
				font-size: 12px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: center;
			}
		}

		button {
			margin: 0;
			border: 0;
			height: 120rpx;
			margin-top: 250rpx;
			background-color: #fff;
		}

		button::after {
			border: none;
		}

		.map-icon {
			display: inline;
			float: right;
			border: none;

			image {
				width: 108rpx;
				height: 108rpx;
			}
		}

	}

	.container-talk-popup-tag {
		display: flex;
		background-color: #fff;
		width: 100rpx;
		height: 50rpx;
		border-radius: 35rpx;
		justify-content: center;
		align-items: center;
		margin-top: 10rpx;
		white-space: nowrap
	}

	.label-more .chooseTag {
		background-color: #fff;
	}

	.label-more .chooseTag .tagList {
		width: 90%;
		display: flex;
		align-items: center;
		height: 60rpx;
		margin-top: 30rpx;
		justify-content: center;
		margin-left: 10rpx;
		border-radius: 60rpx;
		border: 10rpx solid #5a53c8;
	}
</style>
